<template>
    <div>
        <!--返回-->
        <div>
            <el-page-header @back="back" content="溯源海报页面">
            </el-page-header>
            <div class="interspaceH"></div>
            <!--步骤条-->
            <!--      <el-steps :active="active" finish-status="success">
                    &lt;!&ndash;创建活动&ndash;&gt;
                    <el-step title="创建活动"></el-step>
                    &lt;!&ndash;分享设置&ndash;&gt;
                    <el-step title="分享设置"></el-step>
                  </el-steps>
                  <div class="interspaceH"></div>-->
            <!--创建活动-->
            <div v-if="active==0">
                <el-row>
                    <el-col :span="12">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"
                                 class="demo-ruleForm">
                            <el-form-item label="溯源二维码名称" prop="tracingPosterName" required>
                                <el-input style="width: 220px" v-model="ruleForm.tracingPosterName"></el-input>
                            </el-form-item>
                            <el-form-item label="关联活动" prop="luckyId">
                                <el-select placeholder="活动类型" v-model="ruleForm.activitys" @change="handlechange">
                                    <el-option label="大转盘" value="大转盘"></el-option>
                                    <el-option label="裂变活动" value="裂变活动"></el-option>
                                    <el-option label="线下活动" value="线下活动"></el-option>
                                </el-select>
                                <el-select v-model="ruleForm.luckyId" placeholder="活动名称">
                                    <el-option
                                            v-for="item in activity"
                                            :key="item.activityInstanceId"
                                            :label="item.name"
                                            :value="item.activityInstanceId"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动时间" required>
                                <el-date-picker
                                        v-model="ruleForm.date"
                                        type="daterange"
                                        align="right"
                                        unlink-panels
                                        value-format="yyyy-MM-dd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="活动标题" prop="tracingPosterTitle">
                                <el-input style="width: 220px" v-model="ruleForm.tracingPosterTitle"></el-input>
                            </el-form-item>
                            <el-form-item label="活动内容" prop="tracingPosterContent">
                                <el-input style="width: 220px" v-model="ruleForm.tracingPosterContent"></el-input>
                            </el-form-item>

                            <el-form-item label="推广人员" prop="empId">
                                <el-button size="small" @click="adds">+ 添加成员</el-button>
                                <el-tag v-for="item in ruleForm.resource" :key="ruleForm.emp" closable
                                        style="margin-right: 5px" @close="handleClose(item)">
                                    {{ item.empName }}
                                </el-tag>
                            </el-form-item>
                            <el-dialog title="选择推广人员" :visible.sync="closeDialogs" width="26.5%"
                                       :close-on-click-modal="false">
                                <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="resourceArrs"
                                             :data="resource"
                                             @left-check-change="leftChange"
                                             @right-check-change="rightChange"></el-transfer>
                                <br/>
                                <el-row>
                                    <el-col :span="7" :offset="17">
                                        <el-button size="small" @click="quxiao">取消</el-button>
                                        <el-button size="small" type="primary" @click="peoples">提交</el-button>
                                    </el-col>
                                </el-row>
                            </el-dialog>
                            <el-form-item label="活动时间" prop="activityTime">
                                <el-radio label="1" v-model="ruleForm.activityTime">显示</el-radio>
                                <el-radio label="2" v-model="ruleForm.activityTime">隐藏</el-radio>
                            </el-form-item>
                            <el-form-item label="公司logo" prop="companyLogo">
                                <el-radio label="1" v-model="ruleForm.companyLogo">显示</el-radio>
                                <el-radio label="2" v-model="ruleForm.companyLogo">隐藏</el-radio>
                            </el-form-item>
                            <el-form-item label="员工名称" prop="empAlign">
                                <el-radio label="left" v-model="ruleForm.empAlign">居左</el-radio>
                                <el-radio label="center" v-model="ruleForm.empAlign">居中</el-radio>
                                <el-radio label="right" v-model="ruleForm.empAlign">居右</el-radio>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <iframe src="http://wx.zzxapps.com/pages/activity/poster" frameborder="0"
                                style="width: 300px;height: 560px;"></iframe>
                    </el-col>
                </el-row>
            </div>
            <!--分享设置-->
            <div v-if="active==1">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="海报背景图" prop="posterBackground">
                        <el-radio label="1" v-model="ruleForm.posterBackground">默认海报</el-radio>
                        <el-radio label="2" v-model="ruleForm.posterBackground">自定义上传</el-radio>
                        <div v-if="ruleForm.posterBackground == '2'" style="width: 290px;height: 200px">
                            <MaterialContentText ref="materialContentText1" v-model="ruleForm.background"
                                                 :disabledAdd="true" :contentType="[2]"/>
                        </div>
                    </el-form-item>
                    <el-form-item label="分享链接封面" prop="tracingPosterImage">
                        <el-radio label="1" v-model="ruleForm.tracingPosterImage">默认封面</el-radio>
                        <el-radio label="2" v-model="ruleForm.tracingPosterImage">自定义封面</el-radio>
                        <div v-if="ruleForm.tracingPosterImage == '2'" style="width: 290px;height: 200px">
                            <MaterialContentText ref="materialContentText1" v-model="ruleForm.posterImage"
                                                 :disabledAdd="true" :contentType="[2]"/>
                        </div>
                    </el-form-item>
                    <el-form-item label="链接分享标题" prop="shareTitle">
                        <el-radio label="1" v-model="ruleForm.shareTitle">活动名称</el-radio>
                        <el-radio label="2" v-model="ruleForm.shareTitle">自定义标题</el-radio>
                        <div v-if="ruleForm.shareTitle == '2'">
                            <el-input style="width: 220px" v-model="ruleForm.title"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="tracingPosterDescription">
                        <el-input
                                style="width: 220px"
                                type="textarea"
                                :rows="2"
                                placeholder="喊好友来参加"
                                v-model="ruleForm.tracingPosterDescription">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>

            <el-button style="margin-top: 12px;" @click="back" v-if="active==0">返回</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="next" v-if="active==0">下一步</el-button>

            <el-button style="margin-top: 12px;" @click="up" v-if="active==1">上一步</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="tijiao" v-if="active==1">保存</el-button>
            <!--      <el-button style="margin-top: 12px;" type="primary" @click="tijiao" v-if="active==0">发布</el-button>-->
        </div>
    </div>
</template>

<script>
import MaterialContentText from "@/components/material_content_text/material_content_text"

export default {
    components: {
        MaterialContentText
    },
    name: "add",
    data() {
        return {
            closeDialogs: false,
            resourceArrs: [],
            resource: [],
            activity: [],
            //输入框
            textarea: '',
            active: 0,
            disabled: false,
            ruleForm: {
                background: '',
                posterImage: '',
                empId: [],
                emps: '',
                tracingPosterName: '',
                luckyId: '',
                date: [],
                tracingPosterTitle: '',
                tracingPosterContent: '',
                posterBackground: '',
                activityTime: '',
                companyLogo: '',
                empAlign: '',
                tracingPosterImage: '',
                shareTitle: '',
                tracingPosterDescription: '',

                activitys: '',
                title: ''
            },
            //验证
            rules: {
                tracingPosterName: [
                    {required: true, message: '请输入海报名称', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ],

            },
            //时间
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
        }
    },
    mounted() {
        this.$request("/api/emp/getEmpList/1_0", {}, "POST").then((data) => {
            this.resource = data.rows
            this.resource.forEach((item, i) => {
                this.resource[i].key = this.resource[i].empId;
                this.resource[i].label = this.resource[i].empName;
                this.resource[i].disabled = false
            })
        })
    },
    methods: {
        handlechange(value) {
            console.log(value)
            let activityInstance = {
                activityInstanceType: value
            }
            let that = this
            //列表
            that.$request("/api/wheel/getByType/1_0", activityInstance, "POST").then((data) => {
                that.activity = data.rows
            })
        },
        //返回按钮
        back() {
            this.$emit("currentHandler", "list")
        },
        //下一步按钮
        next() {
            if (this.active++ > 1) this.active = 0;
        },
        //上一步按钮
        up() {
            if (this.active-- > -1) this.active = 0;
        },
        tijiao: function () {
            //判断是否自定义标题
            if (this.ruleForm.shareTitle == '1') {
                this.shareTitle = this.ruleForm.shareTitle
            } else if (this.ruleForm.shareTitle == '2') {
                this.shareTitle = this.ruleForm.title
            }
            //判断活动渠道
            if (this.ruleForm.activitys == '大转盘') {
                this.channel = '线上活动'
            } else if (this.ruleForm.activitys == '裂变活动') {
                this.channel = '线上活动'
            } else if (this.ruleForm.activitys == '线下活动') {
                this.channel = '线下活动'
            }
            if (this.ruleForm.posterBackground == '2') {
                let backgorund1 = this.$refs.materialContentText1.getData()
                let a = backgorund1[0].material;
                this.ruleForm.background = a.materialLinksCover
            } else {
                this.ruleForm.background = this.ruleForm.posterBackground
            }
            if (this.ruleForm.tracingPosterImage == '2') {
                let posterImage = this.$refs.materialContentText1.getData()
                let b = posterImage[0].material;
                this.ruleForm.posterImage = b.materialLinksCover
            } else {
                this.ruleForm.posterImage = this.ruleForm.tracingPosterImage
            }

            let empId = this.ruleForm.empId.join(",")
            this.empIds = empId
            let tracingPoster = {
                tracingPosterName: this.ruleForm.tracingPosterName,
                luckyId: this.ruleForm.luckyId,
                startTime: this.ruleForm.date[0],
                endTime: this.ruleForm.date[1],
                tracingPosterTitle: this.ruleForm.tracingPosterTitle,
                tracingPosterContent: this.ruleForm.tracingPosterContent,
                posterBackground: this.ruleForm.background,
                activityTime: this.ruleForm.activityTime,
                companyLogo: this.ruleForm.companyLogo,
                empAlign: this.ruleForm.empAlign,
                tracingPosterImage: this.ruleForm.posterImage,
                shareTitle: this.shareTitle,
                tracingPosterDescription: this.ruleForm.tracingPosterDescription,
                tracingPosterStatus: '进行中',
                channel: this.channel,
                empId: this.empIds
            }
            console.log(tracingPoster)
            let that = this
            //列表
            that.$request("/api/tracingPoster/insertTracingPoster/1_0", tracingPoster, "POST").then((data) => {
                this.$message({
                    message: '创建溯源码成功',
                    type: 'success'
                });
                this.$emit("currentHandler", "list")
            })

        },
        baocun() {
            this.$message({
                message: '保存溯源码成功',
                type: 'success'
            });
            this.$emit("currentHandler", "list")
        },
        adds() {
            this.closeDialogs = true
        },
        leftChange(e) {
            let value = this.resourceArrs
            let a = value.concat(e);

            this.resourceArrs = a
        },
        rightChange(e) {
            let value = []
            this.resourceArrs.map((item) => {
                if (item != e[0]) {
                    value.push(item)
                }
            })
            this.resourceArrs = value;
        },
        //提交
        peoples() {
            let arr = this.resourceArrs
            let resource = this.resource
            let result = []
            let resultId = []
            arr.map((value, index, array) => {
                resource.map((item) => {
                    if (item.key == value) {
                        result.push(item)
                        resultId.push(value)
                    }
                })
            })
            this.ruleForm.resource = result
            this.ruleForm.empId = resultId
            this.quxiao()
        },
        //取消
        quxiao() {
            this.closeDialogs = false
        },
        handleClose(item) {
            this.ruleForm.resource.splice(this.ruleForm.resource.indexOf(item), 1);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        uploadSuccess(e, file) {
            let fileName = '/api/tracingPoster/' + e.fileEntities[0]['newFileNames'];
            this.paths.push(fileName);
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
